import React, { Component } from 'react'
import {
  FullScreenContainer,
  BorderBox1,
  BorderBox3,
  BorderBox9,
  CapsuleChart,
  ActiveRingChart,
  ConicalColumnChart,
  BorderBox8,
  FlylineChartEnhanced,
  BorderBox2,
  ScrollRankingBoard,
  ScrollBoard,
  WaterLevelPond,
  Charts,
  PercentPond
} from '@jiaminghi/data-view-react'
import './index.css'
export default class Index extends Component {

  constructor(props) {
    super(props)
    this.state = {
      topdata: {
        data: [
          {
            name: '周口',
            value: 55
          },
          {
            name: '南阳',
            value: 120
          },
          {
            name: '西峡',
            value: 78
          },
          {
            name: '马店',
            value: 66
          },
          {
            name: '新乡',
            value: 80
          },
          {
            name: '信阳',
            value: 45
          },
          {
            name: '漯河',
            value: 29
          }
        ],
      },
      middata: {
        data: [
          {
            name: '周口',
            value: 55
          },
          {
            name: '南阳',
            value: 120
          },
          {
            name: '西峡',
            value: 78
          },
          {
            name: '马店',
            value: 66
          },
          {
            name: '新乡',
            value: 80
          },
          {
            name: '信阳',
            value: 45
          },
          {
            name: '漯河',
            value: 29
          }
        ],
      },
      playdata: {
        data: [
          {
            name: '周口',
            value: 55
          },
          {
            name: '南阳',
            value: 120
          },
          {
            name: '西峡',
            value: 78
          },
          {
            name: '马店',
            value: 66
          },
          {
            name: '新乡',
            value: 80
          },
          {
            name: '信阳',
            value: 45
          },
          {
            name: '漯河',
            value: 29
          }
        ]
      },
      playsdata: {
        points: [
          {
            name: '郑州',
            coordinate: [0.48, 0.35]
          },
          {
            name: '新乡',
            coordinate: [0.52, 0.23]
          },
          {
            name: '焦作',
            coordinate: [0.43, 0.29]
          },
          {
            name: '开封',
            coordinate: [0.59, 0.35]
          },
          {
            name: '许昌',
            coordinate: [0.53, 0.47]
          },
          {
            name: '平顶山',
            coordinate: [0.45, 0.54]
          },
          {
            name: '洛阳',
            coordinate: [0.36, 0.38]
          },
          {
            name: '周口',
            coordinate: [0.62, 0.55]
          },
          {
            name: '漯河',
            coordinate: [0.56, 0.56]
          },
          {
            name: '南阳',
            coordinate: [0.37, 0.66]
          },
          {
            name: '信阳',
            coordinate: [0.55, 0.81]
          },
          {
            name: '驻马店',
            coordinate: [0.55, 0.67]
          },
          {
            name: '济源',
            coordinate: [0.37, 0.29]
          },
          {
            name: '三门峡',
            coordinate: [0.20, 0.36]
          },
          {
            name: '商丘',
            coordinate: [0.76, 0.41]
          },
          {
            name: '鹤壁',
            coordinate: [0.59, 0.18]
          },
          {
            name: '濮阳',
            coordinate: [0.68, 0.17]
          },
          {
            name: '安阳',
            coordinate: [0.59, 0.10]
          }
        ],
        lines: [
          {
            source: '新乡',
            target: '郑州'
          },
          {
            source: '焦作',
            target: '郑州'
          },
          {
            source: '开封',
            target: '郑州'
          },
          {
            source: '许昌',
            target: '郑州'
          },
          {
            source: '平顶山',
            target: '郑州'
          },
          {
            source: '洛阳',
            target: '郑州'
          },
          {
            source: '周口',
            target: '郑州'
          },
          {
            source: '漯河',
            target: '郑州'
          },
          {
            source: '南阳',
            target: '郑州'
          },
          {
            source: '信阳',
            target: '郑州'
          },
          {
            source: '驻马店',
            target: '郑州'
          },
          {
            source: '济源',
            target: '郑州'
          },
          {
            source: '三门峡',
            target: '郑州'
          },
          {
            source: '商丘',
            target: '郑州'
          },
          {
            source: '鹤壁',
            target: '郑州'
          },
          {
            source: '濮阳',
            target: '郑州'
          },
          {
            source: '安阳',
            target: '郑州'
          }
        ],
        bgImgSrc: 'http://datav-react.jiaminghi.com/img/flylineChart/map.jpg',
        text: {
          show: true,
        },
        halo: {
          show: true,
        },
        line: {
          show: true,
        },
        k: 0.5,
      },
      linedata: {
        data: [
          {
            name: '周口',
            value: 55
          },
          {
            name: '南阳',
            value: 120
          },
          {
            name: '西峡',
            value: 78
          },
          {
            name: '马店',
            value: 66
          },
          {
            name: '新乡',
            value: 80
          },
          {
            name: '信阳',
            value: 45
          },
          {
            name: '漯河',
            value: 29
          }
        ],
      },
      linesdata: {
        data: [
          ['行1列1', '行1列2', '行1列3'],
          ['行2列1', '行2列2', '行2列3'],
          ['行3列1', '行3列2', '行3列3'],
          ['行4列1', '行4列2', '行4列3'],
          ['行5列1', '行5列2', '行5列3'],
          ['行6列1', '行6列2', '行6列3'],
          ['行7列1', '行7列2', '行7列3'],
          ['行8列1', '行8列2', '行8列3'],
          ['行9列1', '行9列2', '行9列3'],
          ['行10列1', '行10列2', '行10列3']
        ],
      },
      waterdata: {
        data: [60],
      },
      watedata: {
        title: {
          text: '剩余油量表',
          style: {
            fill: '#fff'
          }
        },
        series: [
          {
            type: 'gauge',
            data: [ { name: 'itemA', value: 55 } ],
            center: ['50%', '55%'],
            axisLabel: {
              formatter: '{value}%',
              style: {
                fill: '#fff'
              }
            },
            axisTick: {
              style: {
                stroke: '#fff'
              }
            },
            animationCurve: 'easeInOutBack'
          }
        ]
      },
      watertsdata: {
        value: 66
      },
    }
  }



  render() {
    const { topdata,middata,playdata,playsdata,linedata,linesdata,waterdata,watedata,watertsdata } = this.state
    return (

      <FullScreenContainer className="box">
        <div className="box">
          <div className="left">
            <BorderBox1 className="left-top leftbox">
              <div className="box1-top">
                <div className="box1-top-text">小刘的DavaV</div>
                <div className="box1-top-text2">收污总数:480件</div>
              </div>
              <CapsuleChart config={topdata} className="box1" />
            </BorderBox1>
            <BorderBox3 className="left-mid leftbox">
                <ActiveRingChart config={middata} style={{ width: '100%', height: '80%' }} />
                <div className='left-mid-text'>情况展示图</div>
            </BorderBox3>
            <BorderBox9 className="left-bom leftbox">
              <ConicalColumnChart config={playdata} style={{width: '100%', height: '70%'}} />
              <div className='left-mid-text'>情况展示图</div>
            </BorderBox9>
          </div>
          <div className="right">
            <div className="right-top">
              <div className="right-top-left">
                <BorderBox8 className="borderBox8">
                  <FlylineChartEnhanced config={playsdata} style={{width: '100%', height: '100%'}} />
                </BorderBox8>
              </div>
              <div className="right-top-right">
                <BorderBox2 className="right-top-right-top">
                  <ScrollRankingBoard className="scrollRankingBoard" config={linedata} style={{width: '80%', height: '100%'}} />
                </BorderBox2>
                <BorderBox2 className="right-top-right-top">
                  <ScrollBoard className="scrollRankingBoard" config={linesdata} style={{width: '80%', height: '95%'}} />
                </BorderBox2>
              </div>
            </div>
            <div className="right-bom">
              <WaterLevelPond config={waterdata} style={{width: '33%', height: '95%'}} />
              <Charts option={watedata} style={{width: '33%', height: '95%'}}/>
              <PercentPond config={watertsdata} style={{width: '33%', height: '95%'}} />
            </div>
          </div>
        </div>
      </FullScreenContainer>
    )
  }
}
